<template>
  <div class="auditwin" v-loading="isOutTime">
    <Table
      :show="true"
      :name="{table,isbtn,pageNum,pageSize,pageLength}"
      @handleSelectionChange="handleSelectionChange"
      @order="order"
      @online="online"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @batchdelete="batchdelete"
      v-if="isShow"
      v-on:ids="getValue"
    ></Table>
    <!-- 选中预约时间 -->
    <el-dialog title="选择预约时间" :visible.sync="selectTime" width="25%">
      <div class="block">
        <span class="demonstration">
          <p class="per-remind">
            <i class="el-icon-message-solid"></i>若当天预约名额已达上限，请选择其他时间段
          </p>
        </span>
        <div class="time-box">
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="选择预约日期"
            :picker-options="pickerOptions"
            @change="starttimechange"
            value-format="yyyy-MM-dd"
          ></el-date-picker>-
          <el-select v-model="timepar" placeholder="请选择时间段" :disabled="isdisabled">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <!-- <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectTime = false">取 消</el-button>
        <el-button type="primary" @click="setTime">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预约成功 -->
    <el-dialog title="预约成功" :visible.sync="succeed" width="25%" :before-close="handleClose" @close="orderSure">
      <div class="succeed-layer">
        <!-- <div class="number">
          <p>{{resultData.num}}</p>
        </div>-->
        <span class="s-1">您的预约号是{{resultData.ordernum}}，请您在{{resultData.orderDate}}，{{resultData.time}}到{{resultData.brchna}}办理业务！</span>
        <div class="s-2">
          <span>提示：请根据你的申请类型，带好您办理业务时所需的资料</span>
          <br>
          <span>企业所需资料：商标注册申请书、公章、营业执照以及经办人身份证复印件；</span>
          <br>
          <span>个体工商户所需资料：商标注册申请书、营业执照、经营者身份证复印件以及经办人身份证复印件</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="succeed = false">取 消</el-button>
        <el-button type="primary" @click="orderSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/tableStyle/Table";

export default {
  data() {
    return {
      // 数据
      table: [],
      //预约成功：待定
      //审核通过：2
      //审核失败：3
      //审核中：1
      isbtn: 2,
      user: "",
      index: "",
      // 预约号
      order_id: "",
      //分页
      pageNum: 1,
      pageSize: 10,
      pageLength: 0,
      startTime: "",
      timepar: "",
      isdisabled: true,
      pickerOptions: {
        disabledDate: function (date) {
          let time = new Date();
          return (
            date.getTime() < time.getTime() - 24 * 60 * 60 * 1000 ||
            date.getTime() > time.getTime() + 24 * 60 * 60 * 1000 * 3
          );
        },
      },
      options: [
        {
          value: "1",
          label: "上午",
        },
        {
          value: "2",
          label: "下午",
        },
      ],
      // 选中的id
      multiple: "",
      //选择时间
      selectTime: false,
      value: "",
      //预约成功
      succeed: false,
      //多选时,网点编号是否相同
      widJudeg: "",
      //需要批量上传的预约列表
      onlineList: "",
      //是否点击的批量上传按钮
      onlineJudeg: false,
      //批量上传的网点编号
      wid: "",
      //回显信息
      resultData: {
        brchna: "", //网点
        orderDate: "", //时间
        time: "", //上下午
        ordernum: "", //第几个预约成功的
      },
      //判断是否超时
      isOutTime: true,
      //判断数据是否获取到
      isShow: false,
    };
  },
  components: { Table },
  methods: {
    orderSure(){
      this.succeed = false;
      this.$store.commit("changeMyBusState","/business/myBusiness/subscribeClassify");
      this.$router.push("/business/myBusiness/subscribeClassify")
    },
    //提示模板
    open(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },

    // 预约成功后点击白板处不会触发任何样式
    handleClose(done) {},

    //单选全选
    handleSelectionChange(value) {
      // ////console.log(value);
      if (!value[1]) return;
      this.wid = value[0].branchNetworkId;
      let id = this.wid;
      this.widJudeg = value.every((item) => {
        return item.branchNetworkId == id;
      });
      this.onlineList = this.widJudeg ? value : "";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.interface();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.interface();
    },
    //删除
    batchdelete(val) {
      // ////console.log(val);
    },
    starttimechange() {
      if (this.startTime != null) {
        this.isdisabled = false;
      } else {
        this.isdisabled = true;
        this.timepar = "";
      }
    },
    //设置时间
    setTime() {
      let ids = [];
      ids.push(this.multiple);
      if (this.startTime == null || this.timepar == "") {
        this.$message({
          type: "warning",
          message: "请选择预约时间段",
        });
        return;
      } else {
        let pids = [],
          url,
          branid;
        if (this.onlineJudeg) {
          branid = this.wid;
          url = "/trademark/order/addFrontOrder";
          this.onlineList.forEach((item) => {
            pids.push(item.id);
            
          });
        } else {
          branid = this.user.branchNetworkId;
          (url = "/trademark/order/addFrontOrder"), (pids = [this.user.id]);
        }
        this.$http
          //  单个预约
          .post(url, {
            //branid
            //pids
            ids: pids,
            orderDate: this.startTime,
            // 1代表上午，2代表下午
            ampm: this.timepar,
            // pid: [3, 5, 7],
            // sign: this.timepar,
            // start: this.startTime + " 00:00:00",
          })
          // orderDate  // 日期
          // ordernum   //  第几个预约成功的
          // time   // 上下午
          // brchna  // 网点
          .then((result) => {
            ////console.log(result);
            let { orderDate, time, brchna, ordernum } = result.data.data;
            this.resultData.orderDate = orderDate;
            this.resultData.time = time;
            this.resultData.brchna = brchna;
            this.resultData.ordernum = ordernum;
            this.selectTime = false;
            this.succeed = true;
            this.onlineJudeg = false;
          });
      }
    },

    //预约获取用户信息
    order(index, row) {
      this.user = row;
      this.index = index;
      this.selectTime = true;
    },
    //批量预约
    online(val) {
      if (this.onlineList == "") {
        this.open("请选择网点编号一致的业务进行批量上传", "error");
        return;
      }
      this.onlineJudeg = true;
      this.selectTime = true;
    },
    //接口
    interface() {
      this.$http
        .post("/trademark/proPublic/findUserStatus", {
          status: this.isbtn,
          // userId: Number(this.$store.state.userId),
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          ////console.log(res);
          if (res.data.code !== 200) {
            this.$message.error("获取数据失败");
            this.isOutTime = false;
          } else {
            this.pageLength = res.data.data.total;
            this.table = res.data.data.list;
            this.isShow = true;
            this.isOutTime = false;
            // ////console.log(this.isShow);
          }
        })
        .catch((err) => {
          this.$message.error("服务器崩溃！");
          this.isShow = true;
          this.isOutTime = false;
        });
    },
    getValue(e) {
      this.multiple = e;

      console.log(this.multiple, 66666);
    },
  },
  mounted() {
    this.interface();
  },
};
</script>

<style lang="less" scoped>
.auditwin {
  .block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .demonstration {
      margin-bottom: 22px;
      color: #ff6633;
      .per-remind {
        display: flex;
        align-items: center;
        .el-icon-message-solid {
          font-size: 20px;
          padding-right: 20px;
        }
      }
    }
    .el-date-editor /deep/.el-range-separator {
      width: 7%;
    }
  }
  .time-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
  }
  .succeed-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .number {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      background-color: #ff6633;
      font-size: 30px;
      color: #fff;
      margin: 0 auto 30px;
    }
    .s-2 {
      margin-top: 10px;
      font-size: 16px;
      color: #ff6633;
    }
  }
}
</style>